<template>
    <div style="height:100%;background:#F0F0F0">
        <yd-layout>   
            <yd-navbar slot="navbar" title="我的信息" style="height:1rem;font-size:.1rem"></yd-navbar>
            <div>
                <div style="height:.25rem"></div>
                <div style="height:1rem;text-align:center;font-size:.5rem;color:#2DC3E8;font-weight:bold">
                    贵州中医药大学图书馆
                </div>
                <div>
                    <yd-cell-group style="margin:0rem .14rem 0rem .14rem;">
                        <yd-cell-item>
                            <span slot="left" style="font-size:.3rem;font-weight:bold">我的借书证号：</span>
                            <span slot="right" style="font-size:.4rem;color:#2DC3E8;font-weight:bold">{{dztm}}</span>
                        </yd-cell-item>
                    </yd-cell-group>
                    <div v-for="item in list" :key="item.key" style="margin:.15rem .0rem 0.05rem 0rem;">
                        <div class="div1"> 
                            <yd-cell-group style="margin:0rem .14rem 0rem .14rem;">
                                <yd-cell-item>
                                    <span slot="left">书名：</span>
                                    <span slot="right">
                                        <div style="height:.8rem;margin:.15rem .0rem 0.25rem .15rem;text-align:left;font-size:.3rem" v-if="item.tm.length>18">{{item.tm}}</div>
                                        <div style="height:.35rem;margin:.15rem .0rem 0.25rem .15rem;text-align:left;font-size:.3rem" v-else>{{item.tm}}</div>
                                    </span>
                                </yd-cell-item>
                                <div style="width:100%;height:1px; background:#E0E0E0;"></div>
                                <yd-cell-item>
                                    <span slot="left">借书日期：</span>
                                    <span slot="right">{{item.wjsj}}</span>
                                </yd-cell-item>
                                <div style="width:100%;height:1px; background:#E0E0E0;"></div>
                                <yd-cell-item>
                                    <span slot="left">归还日期：</span>
                                    <span slot="right" style="color:red">{{item.yghsj}}</span>
                                </yd-cell-item>
                                <div style="width:100%;height:1px; background:#E0E0E0;"></div>
                                <yd-cell-item>
                                    <span slot="left">索书号：</span>
                                    <span slot="right" style="">{{item.ssh}}</span>
                                </yd-cell-item>
                                <div style="width:100%;height:1px; background:#E0E0E0;"></div>
                                <yd-cell-item>
                                    <span slot="left">图书位置：</span>
                                    <span slot="right" style="">{{(item.ssh.substr(0,1)=='R'||item.ssh.substr(0,1)=='Q')?"生物医药书库":"人文社科书库"}}</span>
                                </yd-cell-item>
                                <div style="width:100%;height:1px; background:#E0E0E0;"></div>
                                <yd-cell-item v-if="item.hsts >= 0">
                                    <span slot="left">剩余还书天数：</span>
                                    <span slot="right" style="font-size:.3rem;">{{item.hsts}}</span>
                                </yd-cell-item>
                                <yd-cell-item v-else>
                                    <span slot="left"> 已超期天数</span>
                                    <span slot="right" style="font-size:.3rem;color:red">{{Math.abs(item.hsts)}}</span>
                                </yd-cell-item>
                                <div style="width:100%;height:1px; background:#E0E0E0;"></div>
                                <div v-show="item.sfyxxj&&isShow">
                                    <yd-button bgcolor="#2DC3E8" style="text-align:center;font-size:.3rem;font-weight:bold;color:white;margin:0.15rem 0rem 0.15rem 0rem;" 
                                    @click.native="submit(item)" >续借</yd-button>
                                </div>
                            </yd-cell-group>
                        </div>
                    </div>
                </div> 
            </div>
            <yd-tabbar slot="tabbar">
                <yd-tabbar-item title="我要找书" link="#" active @click.native="scanCode()">
                    <yd-icon name="search" slot="icon"></yd-icon>
                </yd-tabbar-item>
            </yd-tabbar>  
        </yd-layout>           
    </div>
</template>

<script>
import Vue from 'vue';
import axios from 'axios'
import {Layout} from 'vue-ydui/dist/lib.rem/layout';
Vue.component(Layout.name, Layout);
import {Button, ButtonGroup} from 'vue-ydui/dist/lib.rem/button';
Vue.component(Button.name, Button);
Vue.component(ButtonGroup.name, ButtonGroup);
import {NavBar, NavBarBackIcon, NavBarNextIcon} from 'vue-ydui/dist/lib.rem/navbar';
Vue.component(NavBar.name, NavBar);
Vue.component(NavBarBackIcon.name, NavBarBackIcon);
Vue.component(NavBarNextIcon.name, NavBarNextIcon);
import {TabBar, TabBarItem} from 'vue-ydui/dist/lib.rem/tabbar';
Vue.component(TabBar.name, TabBar);
Vue.component(TabBarItem.name, TabBarItem);
import {CellGroup, CellItem} from 'vue-ydui/dist/lib.rem/cell';
Vue.component(CellGroup.name, CellGroup);
Vue.component(CellItem.name, CellItem);
import {Input} from 'vue-ydui/dist/lib.rem/input';
Vue.component(Input.name, Input);
import { Confirm, Alert, Toast, Notify, Loading } from 'vue-ydui/dist/lib.rem/dialog';
Vue.prototype.$dialog = {
    confirm: Confirm,
    alert: Alert,
    toast: Toast,
    notify: Notify,
    loading: Loading,
};
export default {
    data() {
        return {
            dztm:window.localStorage.getItem("dztm"),
            isShow:true,
            list:[],
            
        }
    },
    created(){
        if(window.localStorage.getItem("dztm") == null|| window.localStorage.getItem("dztm") == ''){
            this.getUser();
        }else{
            this.dztm = window.localStorage.getItem("dztm")
            this.mockTableData()
        }
    },
    methods:{
        mockTableData(){
            let datas = [];
            this.list = [];
            //获取用户的借书记录
            let that_ = this;
            axios.get('/api/libiary/queryCur?dztm='+that_.dztm,{withCredentials: true})
            .then(function (res) {  
                console.log(res)    
                let temp = res.data
                if(temp.length > 0){
                    temp.forEach( v=>{
                        if(Number(v.hsts) < 0 || Number(v.qfk) > 0){
                            that_.isShow = false;
                        }
                        that_.list.push(v)
                    })
                }else{
                    that_.$dialog.alert({mes: '您好，暂时没有借书！！'});
                }                                  
            })
            .catch(function (error) {
                console.log(error);
                that_.$dialog.toast({
                    mes: "服务器繁忙，请稍后再试！",
                    timeout: 2500,
                    icon: 'error',
                }); 
            }); 
            return datas;
        },
        submit(data){
            this.$dialog.confirm({
                title: '续借',
                mes: '您确定续借《'+data.tm+'》20天？',
                opts: () => {
                    this.renew(data);
                }
            });
        },
        //续借操作
        renew(data){
            var qs = require('querystring');
            let that_ = this;
            axios.post(          
                "/api/libiary/renew",
                qs.stringify({
                    dztm: that_.dztm,
                    zjm: data.zjm       
                })
            ).then(function(res){
                that_.$dialog.toast({
                    mes: res.data,
                    timeout: 1500
                }); 
                that_.mockTableData();
                //that_.$router.go(0);
            }).catch(function (error) {
                console.log(error);
                that_.$dialog.toast({
                    mes: "服务器繁忙，请稍后再试！",
                    timeout: 2500,
                    icon: 'error',
                }); 
            });                 
        },
        openCustomConfrim() {
            this.$dialog.confirm({
                title: '温馨提示',
                mes: '您的微信尚未绑定校园卡，请点击绑定按钮进行绑定',
                opts: [
                    {
                        txt: '绑定',
                        color: true,
                        callback: () => {
                            this.$router.push({path: '/bdkh'});
                        }
                    }
                ]
            });
        },
        scanCode(){
            this.$router.push({path: '/scanCode'});
        },
        getUser(){
            let that_ = this
            axios.get('/api/libiary/code',{
                params:{                  
                  appId:appId,
                  code:code,     
                },
                withCredentials:true
            })
            .then(function (res) {      
              console.log(res) 
              if(res.data.data.dztm == null || res.data.data.dztm== ''){
                  that_.openCustomConfrim();
              }else{
                  window.localStorage.setItem("dztm",res.data.data.dztm);
                  window.localStorage.setItem("name",res.data.data.name)  
                  that_.dztm = res.data.data.dztm;
                  that_.mockTableData();
              }                    
            })
            .catch(function (error) {
                console.log(error);
            }); 
        }
    }
}
</script>

<style>
.yd-cell-right {
    min-height:.7rem!important;
}
.div1{
    width:97%;
    height:100%;
    margin:2px auto;
    text-align: center;
    background: white;
    border:1px solid #BFB8C0;
    box-shadow: darkgrey 10px 10px 30px 5px;
}
</style>
    